<template>
  <sys-dialog :visible.sync="openDialog" :left="0" :bottom="0" width="100%" height="80%" animation-name="bottom" @close="close">
    <template slot-scope="scope">
      <goods-model v-if="scope.isShow" :goods="goods" :buy-record="buyRecord" @close-dialog="closeDialog" @ensure="ensure"></goods-model>
    </template>
  </sys-dialog>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysDialog from 'common/sysDialog';
  import GoodsModel from './goodsModel';

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      goods: {
        type: Object,
        required: true
      },
      buyRecord: Object
    },

    watch: {
      visible() {
        this.openDialog = this.visible;
      }
    },

    data() {
      return {
        openDialog: this.visible
      };
    },

    methods: {
      closeDialog() {
        this.$emit('update:visible', false);
      },

      close() {
        this.$emit('close');
      },

      ensure(goodsModelData) {
        this.buyRecord.buyGoods(goodsModelData, this.goods);
        this.$emit('update:visible', false);
        this.$emit('buy-success', goodsModelData);
      }
    },

    components: {
      SysDialog,
      GoodsModel
    }
  };

</script>
